<template>
  <div class="behavior-item">
    <div class="content">
      {{ content }}
    </div>
    <el-radio-group v-model="selectedValue" class="radio-group">
      <el-radio :label="0">0</el-radio>
      <el-radio :label="1">1</el-radio>
      <el-radio :label="2">2</el-radio>
    </el-radio-group>
  </div>
</template>

<script>
export default {
  name: 'BehaviorItem',
  props: {
    content: {
      type: String,
      required: true
    },
    value: {
      type: Number,
      default: null
    }
  },
  computed: {
    selectedValue: {
      get() {
        return this.value;
      },
      set(newValue) {
        this.$emit('input', newValue);
      }
    }
  }
};
</script>

<style scoped>
.behavior-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.content {
  flex: 1;
  margin-right: 20px;
}

.radio-group {
  display: flex;
  align-items: center;
}

.el-radio {
  margin-right: 10px;
}
</style>
